<template>
    <div>
        <h1>每周课表</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>时间</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                    <th>周日</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(period, index) in displayedPeriods" :key="index">
                    <td>{{ period.time }}</td>
                    <td>{{ period.mon }}</td>
                    <td>{{ period.tue }}</td>
                    <td>{{ period.wed }}</td>
                    <td>{{ period.thu }}</td>
                    <td>{{ period.fri }}</td>
                    <td>{{ period.sat }}</td>
                    <td>{{ period.sun }}</td>
                </tr>
            </tbody>
        </table>
        <el-pagination background layout="prev, pager, next" :total="totalWeeks" :page-size="1"
            :current-page.sync="currentPage" @current-change="handlePageChange">
        </el-pagination>
        <!-- :current - page.sync="currentPage"：使用 .sync 修饰符双向绑定当前页码到 currentPage 数据属性，这样分页组件的页码变化会更新 currentPage，同时 currentPage 的变化也会反映在分页组件上。
@current - change="handlePageChange"：当页码发生改变时，会触发 handlePageChange 方法。 -->
       
    </div>
</template>

<script>
export default {
    name: 'ClassSchedule',
    data() {
        return {
            weeks: [
                // 假设这里有多周的课表数据，每周数据格式与原始periods相同  
                {
                    periods: [
                        { time: '8:00-9:00', mon: '数学', tue: '英语', wed: '物理', thu: '化学', fri: '生物', sat: '休息', sun: '休息' },
                        { time: '9:00-10:00', mon: '语文', tue: '历史', wed: '地理', thu: '政治', fri: '体育', sat: '休息', sun: '休息' },
                        { time: '10:00-11:00', mon: '英语', tue: '数学', wed: '英语', thu: '数学', fri: '英语', sat: '休息', sun: '休息' },
                        { time: '14:00-15:00', mon: '计算机', tue: '音乐', wed: '美术', thu: '计算机', fri: '音乐', sat: '休息', sun: '休息' },
                        { time: '15:00-16:00', mon: '休息', tue: '休息', wed: '休息', thu: '休息', fri: '休息', sat: '活动', sun: '活动' },
                    ]
                },
                {
                    periods: [
                        // 第二周的课表数据  
                        { time: '8:00-9:00', mon: '数学', tue: '英语', wed: '物理', thu: '生物', fri: '化学', sat: '活动', sun: '活动' },
                        { time: '9:00-10:00', mon: '数学', tue: '英语', wed: '物理', thu: '化学', fri: '生物', sat: '休息', sun: '休息' },
                        { time: '10:00-11:00', mon: '语文', tue: '历史', wed: '地理', thu: '政治', fri: '体育', sat: '休息', sun: '休息' },
                        { time: '14:00-15:00', mon: '英语', tue: '数学', wed: '英语', thu: '数学', fri: '英语', sat: '休息', sun: '休息' },
                        { time: '15:00-16:00', mon: '计算机', tue: '音乐', wed: '美术', thu: '计算机', fri: '音乐', sat: '休息', sun: '休息' },
                    ]
                },

            ],
            currentPage: 1, // 当前显示的周数（页码）  
        };
    },
    computed: {
        totalWeeks() {
            return this.weeks.length;
        },
        displayedPeriods() {
            return this.weeks[this.currentPage - 1]?.periods || [];
        },
    },
    methods: {
        handlePageChange(page) {
            this.currentPage = page;
        },
    },
};  
</script>

        <style scoped>
            table {
                width: 100%;
                height: 600px;
                border-collapse: collapse;
                border-color: white;
                background-color: #f0f9eb;
            }

            th,
            td {
                padding: 10px;
                text-align: center;
            }
        </style>
